<template>
    <div>
        <el-card class="bottom10">
            <el-row>
                <el-col :span="15">
                    <div>
                        <span class="rigth14"> 关键词:</span>
                        <el-input class="width200" v-model="input" clearable placeholder="请输入节点组名称" @change="inputChange">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="3" :push="6">
                    <el-button class="float-right" type="primary" @click="createMonitorGroup">创建监测组</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="table-card">
            <e-table :tableConfig="tableConfig" :tableData="tableData" />
        </el-card>
        <div class="groupDialog dialog-header">
            <el-dialog title="新增监测组" width="805px" v-model="monitorGroupDialog">
                <div class="dialog-div">
                    <span class="rigth14">监测组名称:</span>
                    <el-input class="width200" v-model="monitorName" clearable placeholder="请输入监测组名称">
                    </el-input>
                </div>
                <div class="dialog-div">
                    <span class="rigth14">监测节点选择:</span>
                </div>
                <!-- 添加 keyName 列表显示名称(默认lable)---添加 valueName 取值内容(默认Id) -->
                <transfer-index v-model="defaultData" :rightCheckedData='rightData' :propData='leftData' />
                <el-button class="saveBtn" type="primary" @click="primaryClick">保存</el-button>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import ETable from 'comps/eTable/index.vue';
import TransferIndex from 'comps/transfer/index.vue';
export default defineComponent({
    name: 'monitorGroup',
    components: { ETable, TransferIndex },
    setup() {
        const input = ref('');
        const monitorName = ref('');
        let monitorGroupDialog = ref(false);
        const inputChange = (v: String | Number) => {
            console.log(v);
        };
        const tableConfig = reactive(
            //表格配置
            {
                thead: [
                    { lable: '监测组名称', prop: 'name' },
                    { lable: '监测终端', prop: 'terminal' },
                    { lable: '更新时间', prop: 'renewTime' },
                    { lable: '操作人', prop: 'Operator' }
                ],
                width: '125px',
                operates: [
                    {
                        id: 1,
                        label: '编辑',
                        type: 'text',
                        method: (index: any, row: any) => {
                            console.log(row);
                            console.log(11);
                        }
                    },
                    {
                        id: 2,
                        label: '删除',
                        type: 'text',
                        method: (index: any, row: any) => {
                            console.log(row);
                            console.log(22);
                        }
                    }
                ]
            }
        );
        const tableData = reactive([
            {
                name: '华东监测组',
                terminal: '310',
                renewTime: '2016-05-02 10:55:0',
                Operator: '周剑'
            },
            {
                name: '成电节点组',
                terminal: '320',
                renewTime: '2016-05-02 10:55:0',
                Operator: '谭丽'
            }
        ]);

        const createMonitorGroup = () => {
            monitorGroupDialog.value = true;
        };

        // 穿梭功能
        // 左侧列表
        let leftData: any[] = [
            {
                id: '1',
                label: '成都电信',
                name: '电信'
            },
            {
                id: '2',
                label: '自贡联通',
                name: '联通'
            }
        ];
        // 右侧列表
        let rightData: any[] = [];
        // 选中后
        let data: any = reactive({
            // 右侧选中值
            defaultData: [],
            primaryClick: () => {
                console.log(rightData);
                console.log(222);
                console.log(monitorName.value);
                console.log(data.defaultData);
            }
        });
        return {
            input,
            monitorName,
            inputChange,
            tableConfig,
            tableData,
            createMonitorGroup,
            monitorGroupDialog,
            leftData,
            rightData,
            ...toRefs(data)
        };
    }
});
</script>

<style lang="scss">
.groupDialog {
    .dialog-div {
        margin-bottom: 20px;
    }
    .saveBtn {
        margin-top: 20px;
        width: 80px;
    }
}
</style>